<template>
	<view class="main">
		<view class="head">模式选择</view>
		<view class="box">

			<navigator url="/pages/game/flight?level=1">
				<view class="box_txt">恋爱版</view>
			</navigator>
			<navigator url="/pages/game/flight?level=2">
				<view class="box_txt">热恋版</view>
			</navigator>



			<view class="box_txt" @click="showCodeInput(3)">
				<image class="box_img" src="/static/image/game/hot.png"></image>同居版<image class="box_img"
					src="/static/image/game/lock.png"></image>
			</view>



			<view class="box_txt" @click="showCodeInput(4)">
				<image class="box_img" src="/static/image/game/hot.png"></image>进阶版<image class="box_img"
					src="/static/image/game/lock.png"></image>
			</view>


			<view class="box_txt" @click="showCodeInput(5)">
				<image class="box_img" src="/static/image/game/hot.png"></image>私密版<image class="box_img"
					src="/static/image/game/lock.png"></image>
			</view>


			<view class="box_txt" @click="showCodeInput(6)">
				<image class="box_img" src="/static/image/game/hot.png"></image>BT版<image class="box_img"
					src="/static/image/game/lock.png"></image>
			</view>
			
			
			<view class="box_txt" @click="showCodeInput(11)">
				<image class="box_img" src="/static/image/game/hot.png"></image>会员自定义版<image class="box_img"
					src="/static/image/game/lock.png"></image>
			</view>

		</view>


		<view class="container">
			<!-- 弹窗显示控制 -->
			<view v-if="showModal">
				<!-- 背景遮罩层 -->
				<view class="modal-mask"></view>
				<!-- 弹窗内容层 -->
				<view class="modal-content">
					<text>请输入解锁码</text>
					<input type="number" class="input-code" placeholder="输入解锁码" v-model="inputCode" />
					<view class="btn-row">
						<button size="mini" @click="submitCode">确认</button>
						<button size="mini" @click="cancelModal">取消</button>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<!-- 		'lover0': '恋爱版',
		'lover1': '热恋版',
		'sex0': '同居版',
		'sex1': '进阶版',
		'sex2': '私密版',
		'sm': 'sm版',
		'huwai': '户外版',
		'nvpu': '女仆版',
		'nanpu': '男仆版',
		'custom': '自定义', -->
<script>
	export default {
		data() {
			return {
				showModal: false, // 控制弹窗的显示隐藏
				inputCode: '', // 用户输入的验证码
				level: 1,
				sign: require('./sign.json'),
			};
		},
		methods: {
			// 用户点击按钮触发输入验证码
			showCodeInput(level) {
				//存在token直接跳转页面
				let storedToken = uni.getStorageSync('token');
				let nums = this.sign['cip']
				if (nums.includes(parseInt(storedToken))){
					uni.navigateTo({
						url: '/pages/game/flight?level=' + level
					});
				} else {
					this.level = level;
					this.showModal = true;
				}
			},
			// 提交验证码
			submitCode() {
				if (this.inputCode.trim() === '') {
					// 若输入为空，可以提示用户
					uni.showToast({
						title: '请输入解锁码',
						icon: 'none',
					});
				} else {
					// 这里提交验证码的逻辑
					// 假设提交的函数为submitVerificationCode，需自行实现
					this.submitVerificationCode(this.inputCode);
					this.closeModal();
				}
			},
			// 取消弹窗
			cancelModal() {
				this.closeModal();
			},
			// 关闭弹窗
			closeModal() {
				this.showModal = false;
				this.inputCode = '';
			},

			// 提交验证码的函数，需自行实现具体逻辑
			submitVerificationCode(code) {
				let nums = this.sign['cip']

				if (nums.includes(parseInt(code))) {
					uni.setStorageSync('token', code);
					uni.navigateTo({
						url: '/pages/game/flight?level=' + this.level
					});
				} else {
					alert("密码错误");
				}


				// 实际应用中，这里需要将验证码发送到服务器进行校验，
				// 然后根据服务器的响应进行下一步处理。
			},


		}
	};
</script>

<style lang="scss">
	.main {
		width: 100%;
		height: 1500rpx;
		background-color: #f472b6;
		display: flex;
		justify-content: center;
		justify-items: center;
		flex-wrap: wrap;


		.head {
			width: 750rpx;
			height: 250rpx;
			color: white;
			font-size: 70rpx;
			letter-spacing: 0.5em;
			font-weight: bold;
			display: flex;
			justify-content: center;
			justify-items: center;
			align-items: center;
		}

		.box {
			width: 500rpx;
			height: 900rpx;
			display: flex;
			justify-content: center;
			justify-items: center;
			flex-wrap: wrap;


			.box_txt {
				width: 300rpx;
				height: 100rpx;
				font-size: 30rpx;
				background-color: rebeccapurple;
				color: white;
				display: flex;
				justify-content: center;
				justify-items: center;
				align-items: center;
			}

			.box_img {
				display: block;
				width: 50rpx;
				height: 50rpx;
			}
		}



		//弹窗
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

		.modal-mask {
			position: fixed;
			z-index: 1000;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-content {
			position: fixed;
			z-index: 1003;
			left: 50%;
			top: 40%;
			transform: translate(-50%, -50%);
			background-color: white;
			padding: 20px;
			border-radius: 10px;
		}

		.input-code {
			display: block;
			border: 1px solid #ccc;
			// padding: 10px;
			margin: 10px 0;
		}

		.btn-row {
			display: flex;
			justify-content: space-around;
		}

	}
</style>